<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>upm.io</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="page-pool" data-page="pool">
        <?php include("common-tpl/topnav.php") ?>
        <?php include("common-tpl/topstatus.php") ?>
        
        <div class="container ptm pbm">
            <!-- <div class="col-md-2">
                <div class="clearfix">
                    <div class="fn-left">
                        <h4>资源池管理</h4>
                    </div>
                </div>
                <table class="table table-bordered">
                    <tr>
                      <td>主机池管理</td>
                    </tr>
                    <tr class="active">
                      <td><a href="pool-list.php">主机池列表</a></td>
                    </tr>
                    <tr>
                      <td><a href="javascript:void(0)">主机提供源</a></td>
                    </tr>
                </table>
                <table class="table table-bordered">
                    <tr>
                      <td>网络池规划</td>
                    </tr>
                    <tr>
                      <td><a href="intranet-plan.php">内网规则</a></td>
                    </tr>
                    <tr>
                      <td><a href="extranet-plan.php">外网规则</a></td>
                    </tr>
                </table>
            </div> -->
            <div class="col-md-12">
                <h4 class="tit_name"></h4>
                <div class="row pbl">
                    <div class="col-md-12">
                        <div class="text-right">
                            <button class="btn btn-default" type="button" id="open_add_host_block">
                                添加主机
                            </button>
                            
                            <button class="btn btn-default" type="button" disabled="disabled">
                                主机升级
                            </button>
                        </div>
                        <div class="bg-gray mtsm mbsm">
                            <button class="btn btn-default" type="button" disabled="disabled">
                                <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                                启动
                            </button>
                            <button class="btn btn-default" type="button" disabled="disabled">
                                <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
                                停止
                            </button>
                            <button class="btn btn-default" type="button" id="hostcheck" disabled="disabled">
                                主机检查
                            </button>
                        </div>

                        <table id="pool_pot" class="table table-bordered table-list">
                            <thead>
                                <tr>
                                    <td><input class="checked_all mrs" id="checked_all" type="checkbox"><label for="checked_all">全选</label></td>
                                    <td>ID</td>
                                    <td>主机名称</td>
                                    <td>状态</td>
                                    <td>容器数量</td>
                                    <td>内部IP</td>
                                    <td>外部IP</td>
                                    <td>添加时间</td>
                                    <td>类型</td>
                                    <td>运行状态</td>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        
                        <script type="text/x-jquery-tmpl" id="poolPotTemplate">
                            <tr>
                                <td><input class="form_checkbox mrs" type="checkbox"></td>
                                <td>${index}</td>
                                <td>${name}</td>
                                <td data-status="${status}">${status_t}</td>
                                <td>${cacount}</td>
                                <td>${intaip}</td>
                                <td>${extaip}</td>
                                <td>${create_time}</td>
                                <td>${type}</td>
                                <td data-runningstate="${running_state}">${running_state_t}<div class="status-color status-${classID}"><span class="glyphicon glyphicon-${classID}"></span></div></td>
                            </tr>
                        </script>
                        <nav>

                        </nav>
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="modal fade add_host_block" id="add_host_step_1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加主机</h4>
              </div>
              <div class="modal-body">
                <div class="steps">
                    
                    <div class="l"></div>
                    <div class="sr">
                        <div class="s s1 active">1</div>
                        <div class="s s2">2</div>
                        <div class="s s3">3</div>
                    </div>
                </div>

                <h4>选择主机提供源</h4>
                    
                <table class="table table-striped table-bordered table-list">
                    <thead>
                        <tr>
                            <td></td>
                            <td>主机提供源</td>
                            <td>说明</td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <script type="text/x-jquery-tmpl" id="potSourceTemplate">
                    <tr>
                        <td><input id="potsrc_${id}" name="potsrc" type="radio"></td>
                        <td><label for="potsrc_${id}">${name}</label></td>
                        <td>${comment}</td>
                    </tr>
                </script>


              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary next" data-dismiss="modal">下一步</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade add_host_block" id="add_host_step_2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加主机</h4>
              </div>
              <div class="modal-body">
                <div class="steps">
                    
                    <div class="l"></div>
                    <div class="sr">
                        <div class="s s1">1</div>
                        <div class="s s2 active">2</div>
                        <div class="s s3">3</div>
                    </div>
                </div>

                <h4>选择主机数量和添加类型</h4>

                <table class="table table-striped table-bordered">
                    <tr>
                        <td>主机提供源</td>
                        <td>数量</td>
                    </tr>
                    <tr>
                        <td><div class="selected_source"></div></td>
                        <td><input class="form_number" value="2" type="number" max="50" min="1" /></td>
                    </tr>
                </table>

                <table class="table table-striped table-bordered table-list">
                    <thead>
                        <tr>
                            <td></td>
                            <td>主机类型</td>
                            <td>说明</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input id="potTy_1" data-cn="数据型" value="data-type" checked="checked" name="potTy" type="radio"></td>
                            <td><label for="potTy_1">数据型</label></td>
                            <td>选择数据型将会动态分配给数据类服务，如数据库，缓存等。</td>
                        </tr>
                        <tr>
                            <td><input id="potTy_2" data-cn="非数据型" value="non-data-type" name="potTy" type="radio"></td>
                            <td><label for="potTy_2">非数据型</label></td>
                            <td>选择非数据型将会动态分配给非数据类服务，如Web, 中间件等。</td>
                        </tr>
                        <tr>
                            <td><input id="potTy_3" data-cn="访问入口型" value="access-entry-type" name="potTy" type="radio"></td>
                            <td><label for="potTy_3">访问入口型</label></td>
                            <td>选择访问入口型，将专用于外部请求访问服务。</td>
                        </tr>
                    </tbody>
                </table>

              </div>
              <div class="modal-footer cf">
              <button type="button" class="btn btn-primary fn-left prev" data-dismiss="modal">上一步</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary next">下一步</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade add_host_block" id="add_host_step_2_1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加主机</h4>
              </div>
              <div class="modal-body">
                <div class="steps">
                    
                    <div class="l"></div>
                    <div class="sr">
                        <div class="s s1">1</div>
                        <div class="s s2 active">2</div>
                        <div class="s s3">3</div>
                    </div>
                </div>

                <h4>选择主机数量和添加类型</h4>

                <table class="table table-striped table-bordered">
                    <tr>
                        <td>主机提供源</td>
                        <td>主机类型</td>
                        <td>数量</td>
                    </tr>
                    <tr>
                        <td><div class="selected_source"></div></td>
                        <td><div class="selected_ty"></div></td>
                        <td><div class="selected_number"></div></td>
                    </tr>
                </table>
                <div class="thiswrap">
                    <table class="table table-striped table-bordered table-list table-over">
                        <thead>
                            <tr>
                                <td>设置主机名</td>
                                <td>IP 地址</td>
                                <td>用户名</td>
                                <td>密码(SSH)</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                    <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                </td>
                            </tr>
                        </tfoot>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <script type="text/x-jquery-tmpl" id="potLineTemplate">
                    <tr>
                        <td><input class="form-control input-sm" data-pots="hostname" data-rule="testBasic" type="text" value="${val_0}" /></td>
                        <td><input class="form-control input-sm" data-pots="ip" data-rule="testBasic" type="text" value="${val_1}" /></td>
                        <td><input class="form-control input-sm" data-pots="account" data-rule="testBasic" type="text" value="${val_2}" /></td>
                        <td><input class="form-control input-sm" data-pots="password" data-rule="testPass" type="password" value="${val_3}" /></td>
                        <td>
                            <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
                            <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-paste" aria-hidden="true"></span></button>
                            <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                            <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                        </td>
                    </tr>
                </script>
              </div>
              <div class="modal-footer cf">
              <button type="button" class="btn btn-primary fn-left prev" data-dismiss="modal">上一步</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary next">下一步</button>
              </div>
            </div>
          </div>
        </div>


        <div class="modal fade add_host_block" id="add_host_step_3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加主机</h4>
              </div>
              <div class="modal-body">
                <div class="steps">
                    
                    <div class="l"></div>
                    <div class="sr">
                        <div class="s s1">1</div>
                        <div class="s s2 ">2</div>
                        <div class="s s3 active">3</div>
                    </div>
                </div>

                <h4>确认添加以下主机 </h4>

                <table class="table table-striped table-bordered table-list">
                    <thead>
                        <tr>
                            <td>主机提供源</td>
                            <td>主机名</td>
                            <td>IP 地址</td>
                            <td>主机类型</td>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <script type="text/x-jquery-tmpl" id="potViewTemplate">
                    <tr>
                        <td><div class="selected_potsrc">${potsrc}</div></td>
                        <td><div class="selected_hostname">${hostname}</div></td>
                        <td><div class="selected_ip">${ip}</div></td>
                        <td><div class="selected_ty">${ty}</div></td>
                    </tr>
                </script>
              </div>
              <div class="modal-footer cf">
              <button type="button" class="btn btn-primary fn-left prev" data-dismiss="modal">上一步</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary done" data-dismiss="modal">确认</button>
              </div>
            </div>
          </div>
        </div>


        <div class="modal fade" id="checkstep1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">主机检查</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <form class="form-horizontal" id="">
                                                <ol>
                                                    <li>pot01</li>
                                                    <li>pot02</li>
                                                </ol>
                                                <div class="form-group">
                                                    <div class="col-sm-10">
                                                        <button type="button" class="btn btn-primary" id="submit1">Submit</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.container -->
                    </div>
                </div>
            </div>
        </div>
        
        <?php include("common-tpl/bottomtpl.php") ?>
        
        <script src="assets/js/seajs/sea.js"></script>
        <script type="text/javascript">
            seajs.use('seajs/compass.js');
        </script>
    </body>
</html>
